<template>
  <div>
    <div class='index_top'>

      <img class='beij' src='/static/images/pet_beijing.jpg' />
      <div class='index_top_text'>
        <span style='margin:30rpx 0 30rpx 0;font-size:44rpx;'>爱宠预约新方式</span>
        <span style='font-size:28rpx;'>线上预约项目 选择空闲时间 门店接送服务</span>
      </div>
      <swiper class='index_lbt'>
        <block>
          <swiper-item>
            <img src='/static/images/lbt1.png' />
          </swiper-item>
          <swiper-item>
            <img src='/static/images/lbt2.png' />
          </swiper-item>
          <swiper-item>
            <img src='/static/images/lbt3.png' />
          </swiper-item>
        </block>
      </swiper>
    </div>

    <div style='widtht:100%;height:20rpx;background:#fafafa;'></div>
    <div class='index_two'>
      <div class='index_but' @click="yuyue()">
        <div style=' background:#b4c376;border-radius: 21px;'>
          <img src='/static/images/index_icon1.svg' />
        </div>
        <span>预约服务</span>
      </div>
      <div class='index_but' @click="miao">
        <div style='background:#ff9595;border-radius: 21px;'>
          <img src='/static/images/index_icon2.svg' />
        </div>
        <span>喵星人专区</span>
      </div>
      <div class='index_but' @click="wang">
        <div style='background:#95dbd9;border-radius: 21px;'>
          <img src='/static/images/index_icon3.svg' />
        </div>
        <span>旺星人专区</span>
      </div>
      <div class='index_but' @click="jifen">
        <div style='background:#e7c5d1;border-radius: 21px;'>
          <img src='/static/images/index_icon4.svg' />
        </div>
        <span>积分商城</span>
      </div>
    </div>

    <div style='widtht:100%;height:20rpx;#fafafa;'></div>
    <div class='index_pet'>
      <div style='display:flex;height:60rpx;'>
        <div class='index_pet_left'></div>
        <div class='index_pet_t'>
          <span class='index_pet_tiell'>宠物专场</span>
          <span class='index_pet_but' @click="pet_zhuanc">更多 ></span>
        </div>
      </div>
      <div class='image_qiehuan'>
        <scroll-view style='width:100%;' scroll-x scroll-with-animation>
          <img src='/static/images/index_pet1.png' />
          <img src='/static/images/index_pet2.png' />
          <img src='/static/images/index_pet3.png' />
          <img src='/static/images/index_pet4.png' />
        </scroll-view>

      </div>
    </div>

    <div style='widtht:100%;height:20rpx;#fafafa;'></div>
    <div class='commodity'>
      <div style='display:flex;height:60rpx;'>
        <div class='index_pet_left'></div>
        <div class='index_pet_t'>
          <span class='index_pet_tiell'>畅销商品</span>
          <span @click='tiaozhuan' class='index_pet_but'>更多 ></span>
        </div>
      </div>
      <div class='commodity_one' @click='details'>
        <div class='commodity_one_left'>
          <span style='font-size: 28rpx;color:#505050;margin-top: 32rpx;'>皇家成猫猫粮/2KG</span>
          <span style='font-size: 20rpx;color:#a6a6a6;'>成猫猫粮 & 2KG</span>
          <span style='font-size: 16rpx;color:#a6a6a6;'>
            <span style=' font-size: 28rpx;color:#ff0000;font-weight: bold;'>138 元</span>
          </span>
        </div>
        <div>
          <img src='/static/images/index_pet5.png' />
        </div>
      </div>
      <div class='commodity_two'>
        <div class='commodity_two_left' @click='details'>
          <div style='display:flex;flex-direction: column;margin:35rpx 0 20rpx 35rpx;'>
            <span style='font-size: 28rpx;color:#505050;'>新品推荐</span>
            <span style='font-size: 20rpx;color:#a6a6a6;'>美卡全封闭猫厕所</span>
          </div>
          <img src='/static/images/index_pet6.png' />

        </div>
        <div class='commodity_two_right'>

          <div style='display:flex;flex-direction: column;margin:35rpx 0 20rpx 35rpx;' @click='details'>
            <span style='font-size: 28rpx;color:#505050;'>猜你喜欢</span>
            <span style='font-size: 20rpx;color:#a6a6a6;'>汪星人屯货季</span>
          </div>
          <img src='/static/images/index_pet7.png' />

        </div>

      </div>

    </div>

    <div class='commodity_the'>

      <div class='commodity_the_top' @click='details'>
        <div>
          <img style='width: 170px;height: 164px;margin-right:38rpx;' src='/static/images/index_pet8.png' />
        </div>
        <div style='margin-top:31rpx; display:flex;flex-direction:column;'>
          <span style='font-size: 28rpx;color:#505050;margin-top: 32rpx;'>皇家成猫猫粮/2KG</span>
          <span style='font-size: 20rpx;color:#a6a6a6;'>成猫猫粮 & 2KG</span>
          <span style='margin-bottom:40rpx;margin-top:20rpx; font-size: 16rpx;color:#a6a6a6;'>
            <span style=' font-size: 28rpx;color:#ff0000;font-weight: bold;'>138 元</span>
          </span>
          <div style='display:flex;'>
            <img class='index_icon_sc' src='/static/images/collect.png' />
            <img class='index_icon_shop' src='/static/images/shop.png' />
            <div style=' background:#ff8d1a;width: 116rpx;height: 47rpx;line-height: 40rpx;;text-align: center;'>
              <span style='font-size:24rpx;color:#fff;'>立即购买</span>
            </div>

          </div>
        </div>
      </div>
      <div class='commodity_the_top' @click='details'>

        <div style='margin-top:31rpx; display:flex;flex-direction:column;'>
          <span style='font-size: 28rpx;color:#505050;margin-top: 32rpx;'>美卡全封闭猫厕所</span>
          <span style='font-size: 20rpx;color:#a6a6a6;'>无异味/更安心</span>
          <span style='margin-bottom:40rpx;margin-top:20rpx; font-size: 16rpx;color:#a6a6a6;'>
            <span style=' font-size: 28rpx;color:#ff0000;font-weight: bold;'>189 元</span>
          </span>
          <div style='display:flex;'>
            <img class='index_icon_sc' src='/static/images/collect.png' />
            <img class='index_icon_shop' src='/static/images/shop.png' />
            <div style=' background:#ff8d1a;width: 116rpx;height: 47rpx;line-height: 40rpx;;text-align: center;'>
              <span style='font-size:24rpx;color:#fff;'>立即购买</span>
            </div>

          </div>
        </div>
        <div>
          <img style='width: 170px;height: 164px;margin-left:62rpx;' src='/static/images/index_pet6.png' />
        </div>

      </div>

    </div>

  </div>
</template>

<script>
import card from "@/components/card";

export default {
    data() {
        return {
            goodslist: [],
            hasUserInfo: false,
            canIUse: wx.canIUse("button.open-type.getUserInfo")
        };
    },

    components: {
        card
    },

    methods: {
        yuyue: function() {
            wx.navigateTo({
                url: "/pages/ordered/main"
            });
        },
        miao: function() {
            wx.navigateTo({
                url: "/pages/zones/main"
            });
        },
        wang: function() {
            wx.navigateTo({
                url: "/pages/zones/main"
            });
        },
        jifen: function() {
            wx.navigateTo({
                url: "/pages/Integralmall/main"
            });
        },
        pet_zhuanc: function() {
            wx.navigateTo({
                url: "/pages/pets/main"
            });
        },
        tiaozhuan: function() {
            wx.navigateTo({
                url: "/pages/paging/main"
            });
        },
        details: function() {
            wx.navigateTo({
                url: "/pages/details/main"
            });
        }
    },

    created() {}
};
</script>

<style scoped>
.index_icon_sc {
    width: 36rpx;
    height: 36rpx;
    opacity: 0.56;
    margin-top: 6rpx;
}

.index_icon_shop {
    width: 48rpx;
    height: 48rpx;
    opacity: 0.56;
    margin: 0 24rpx;
}

.index_top .beij {
    width: 100%;
    height: 500rpx;
    position: absolute;
    z-index: -1;
}

.index_top_text {
    width: 540rpx;
    height: 158rpx;
    display: flex;
    flex-direction: column;
    margin-left: 56rpx;
}

.index_top_text span {
    color: rgba(255, 255, 255, 1);
}

.index_lbt {
    margin: 30rpx 28rpx 20rpx 22rpx;
}

.index_lbt img {
    width: 700rpx;
    height: 300rpx;
    border-radius: 10px;
}

.index_two {
    width: 710rpx;
    height: 132rpx;
    margin: 28rpx 20rpx;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

.index_but {
    width: 150rpx;
    height: 132rpx;
    /* text-align: center; */
}

.index_but span {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 1);
}

.index_but div {
    width: 84rpx;
    height: 84rpx;
    margin: 0 32rpx;
}

.index_but img {
    margin-top: 16rpx;
    width: 52rpx;
    height: 52rpx;
}

.index_pet {
    width: 100%;
    height: 548rpx;
}

.index_pet_left {
    width: 6rpx;
    height: 50rpx;
    background-color: #ff5733;
    margin-right: 25rpx;
}

.index_pet_tiell {
    color: #383838;
    font-size: 32rpx;
    margin-right: 476rpx;
}

.index_pet_but {
    color: #a6a6a6;
    font-size: 24rpx;
}

.image_qiehuan {
    height: 462rpx;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.image_qiehuan img {
    width: 314rpx;
    height: 438rpx;
    margin: 0 34rpx;
}

.commodity_one {
    width: 690rpx;
    height: 250rpx;
    background: #f7eff7;
    margin: 0 30rpx;
    border-radius: 20rpx;
    display: flex;
    margin-bottom: 13rpx;
}

.commodity_one_left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120rpx;
    margin-left: 34rpx;
    margin-right: 148rpx;
}

.commodity_one img {
    width: 169rpx;
    height: 209rpx;
    margin-top: 20rpx;
}

.commodity_two {
    display: flex;
    margin-bottom: 55rpx;
}

.commodity_two_left {
    width: 340rpx;
    height: 250rpx;
    background: #edf7ec;
    margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    margin-right: 10rpx;
}

.commodity_two_left img {
    width: 130rpx;
    height: 117rpx;
    margin-left: 85rpx;
}

.commodity_two_right {
    width: 340rpx;
    height: 250rpx;
    background: #fbf7ee;
    display: flex;
    flex-direction: column;
}

.commodity_two_right img {
    width: 224rpx;
    height: 141rpx;
    margin-left: 57rpx;
}

.commodity_the_top {
    width: 670rpx;
    height: 328rpx;
    margin: 0 auto 44rpx auto;
    display: flex;
}

/**index.wxss**/

.ONE {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 1px;
    opacity: 0;
}
</style>
